<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
<script setup name="YeNan">
    import {ref} from 'vue'
    // ref创建基本类型数据
    //用ref api进行创建响应式数据
    let name =ref('张三')  //ref创建的变量在<template>里不需要写".value"
    let age = ref(18)    
    let test = '张三'
    console.log('test',test);  //打印的是一个简简单单的字符串数据
    console.log('name',name);  //打印的是一个RefImpl构造函数的实例对象  RefImpl {xxx:xxxx}
    
    function changeName() {
      // 修改响应式数据时，需要用xxx.value
      name.value = 'zhangsan'   //此时页面数据进行改变
      console.log('name', name)
    }
    function changeAge() {
      age.value += 1 
      console.log('age', age)
    }
    function showTel() {
      alert('一层不染，如此简单')
    }
</script>

<style>
button {
  margin-left: 10px;
}
</style>